<template>
  <div class="system-setting table-page">
    <SideBar v-model="currSideBar" :tabList="tabList" />
    <FoldCard ref="foldCardRef" :title="currSideBar" :addBtnText="currSideBar === '安全力量' ? '新增' : ''" @add="onFoldCardAdd">
      <SecurityAsideList v-if="currSideBar === '安全力量'" :currSideBar="currSideBar" @clickItem="onClickItem" ref="securityAsideListRef" />
      <MarkAsideList v-if="currSideBar === '标绘管理'" @clickItem="onClickItem" />
    </FoldCard>
    <SecurityTableList v-if="currSideBar === '安全力量'" ref="tableListRef" :titlePrefix="currSideBar" :style="tableListMarginStyle" />
    <MarkTableList v-if="currSideBar === '标绘管理'" ref="tableListRef" :titlePrefix="currSideBar" :style="tableListMarginStyle" />
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref, useTemplateRef } from 'vue'
import { useTableListMarginStyle } from '@/hooks/useTableListMarginStyle'
import SideBar from '@/components/SideBar/index.vue'
import SecurityAsideList from './components/Security/AsideList.vue';
import SecurityTableList from './components/Security/TableList.vue';
import MarkAsideList from './components/Mark/AsideList.vue';
import MarkTableList from './components/Mark/TableList.vue';

const tabList = ref(['安全力量', '标绘管理'])
const currSideBar = ref(tabList.value[0])
const foldCardRef = useTemplateRef('foldCardRef')
const securityAsideListRef = useTemplateRef('securityAsideListRef')
const tableListRef = useTemplateRef('tableListRef')
const tableListMarginStyle = useTableListMarginStyle(foldCardRef);

const onFoldCardAdd = () => {
  securityAsideListRef.value.onAdd();
}

const onClickItem = item => {
  tableListRef.value.getData(item);
}

</script>

<style lang="scss" scoped>
@use '@/styles/components/tablePage.scss';
</style>